<template>
  <div class="dialog-admin">
    <el-dialog :visible.sync="dialogVisible" :title="field == 'personInCharge'?'维护项目测试员':'维护项目管理员'" width="60%" @close="handleClose">
      <!-- 项目管理员+项目调试员 -->
      <div v-show="field == 'personInCharge'" class="title">

        <span>已授权列表</span>
        <el-divider />
      </div>
      <el-card>
        <el-table
          :data="gridData"
          border
          stripe
          :header-cell-style="{ background: '#F5F7FA', color: '#333' }"
        >
          <el-table-column
            property="date"
            label="账号"
            width="150"
          />
          <el-table-column
            property="name"
            label="姓名"
            width="200"
          />
          <el-table-column property="address" label="手机号" />
          <el-table-column property="address" label="到期时间" />
          <el-table-column property="address" label="操作">
            <template slot-scope="scope">
              <div
                style="color: #337ab7; cursor: pointer"
                @click="handleAuthorization(scope)"
              >
                取消授权
              </div>
            </template>
          </el-table-column>
        </el-table></el-card>
      <!-- 项目调试员 -->
      <div v-show="field == 'personInCharge'" class="title" style="margin-top: 25px;">

        <span>未授权列表</span>
        <el-divider />
      </div>
      <el-card v-show="field == 'personInCharge'" class="search">
        <el-input
          placeholder="请输入用户手机号"
          style="width: 200px; margin-right: 10px"
          clearable
        />

        <el-button
          class="btn-search"
          round
          icon="el-icon-search"
          size="medium"
        >搜索</el-button>
      </el-card>
      <el-card v-show="field == 'personInCharge'">
        <el-table
          :data="noGridData"
          border
          stripe
          :header-cell-style="{ background: '#F5F7FA', color: '#333' }"
        >
          <el-table-column
            property="date"
            label="账号"
            width="150"
          />
          <el-table-column
            property="name"
            label="姓名"
            width="200"
          />
          <el-table-column property="address" label="手机号" />
          <el-table-column property="address" label="到期时间" />
          <el-table-column property="address" label="操作">
            <template slot-scope="scope">
              <div
                style="color: #337ab7; cursor: pointer"
                @click="handleAuthorization(scope)"
              >
                取消授权
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 项目管理员 -->
      <el-tabs v-show="field=='projectAdmin'" v-model="activeName" type="border-card">
        <el-tab-pane
          label="选取现有管理员"
          name="1"
        />
        <el-tab-pane
          label="新增项目管理员"
          name="2"
        />
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item v-if="activeName === '1'" label="项目管理员" prop="name">
            <el-input v-model="ruleForm.name" style="width: 850px;margin-right:10px" clearable />
            <el-button type="primary" icon="el-icon-check">确定</el-button>
          </el-form-item>
          <div v-else>
            <el-form-item label="登录账号" prop="name">
              <el-input v-model="ruleForm.name" clearable />
            </el-form-item>
            <el-form-item label="账号名称" prop="name">
              <el-input v-model="ruleForm.name" clearable />
            </el-form-item>
            <el-form-item label="初始密码" prop="name">
              <el-input v-model="ruleForm.name" clearable />
            </el-form-item>
            <el-form-item label="手机号码" prop="name">
              <el-input v-model="ruleForm.name" clearable />
            </el-form-item>
            <el-form-item label="到期时间">
              <el-date-picker
                v-model="ruleForm.name"
                type="date"
                placeholder="账号到期时间"
              />
            </el-form-item>
             <div style="text-align: center;">
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                icon="el-icon-check"
              >确定</el-button>
             </div>
          </div>

        </el-form>
      </el-tabs>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogAdmin',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    field: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      noGridData: [

      ],
      ruleForm: {
        name: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }
        ]

      },
      activeName: '1'
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value // 返回父组件通过 v-model 传递的值
      },
      set(val) {
        this.$emit('close', val) // 当 dialogVisible 变化时，通知父组件更新
      }
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false // 关闭弹窗
      this.$emit('close') // 发送关闭事件给父组件
    },

    handleAuthorization(scope) {
      console.log('取消授权', scope)
      this.$confirm('是否要取消该用户的授权吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style lang="scss">
.dialog-admin {
  .el-tabs {
    margin-top: 20px;
  }
  .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active,
  .el-tabs--border-card
    > .el-tabs__header
    .el-tabs__item:not(.is-disabled):hover {
    color: #337ab7;
  }
  .title{
    font-size: 17px;
    font-weight: bold;
    color: #337ab7;

    .el-divider--horizontal{
margin: 10px 0;
    }
  }
  .search{
    margin-bottom: 15px;
  }
}
</style>
